<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>2_指令</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="app">
      <!-- 一个指令能够接收一个“参数”，在冒号后。 -->
      <!-- href 是参数，也是标签的属性名 -->
      <a v-bind:href="url">...</a>
      <!-- Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令 -->
      <div v-bind:id="dynamicId"></div>
      <!-- 如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。 -->
      <button v-bind:disabled="isButtonDisabled">Button</button>
      <br>

      <!-- 动态参数 -->
      <!-- 2.6.0 版本，可以使用中括号括起来的 JavaScript 表达式作为一个指令的参数 -->
      <!-- 避免使用大写字符来命名键名
        在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
        除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
      -->
      <a v-bind:[someAttr]="url">...</a>
      <br>

      <!-- 修饰符 -->
      <!-- 以半角句号 . 指明的特殊后缀 -->
      <!-- .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault() -->
      <form v-on:submit.prevent="onSubmit">...</form> 

    </div>
  </body>
  <script type="text/javascript">
    // 阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;
    new Vue({
      el: "#app",
      data: {
        url: "https://vuejs.org/",
        someattr: "href",
        rawHtml: '<span style="color: red">This should be red.</span>',
        dynamicId: "1f8289ee8620e1ad6b8f2ddb940cefdc",
        isButtonDisabled: true,
      },
    });
  </script>
</html>
